{% extends 'systemapp/baselayout.html' %}
{% load staticfiles %}
{% block content %}

<link rel="stylesheet" type="text/css" href="{% static 'jquerytree/css/style.css' %}">
<script type="text/javascript" src="{% static 'html/systemapp/deptindex.js' %}"></script>
<div id="content">
  <div class="tree well col-md-3">
  <ul style="font-size:5px">
    {% for item in deptlist %}
      {% if item.Level == 0 %}
        <li>
          <span data-keyid="{{ item.KeyId }}"><i class="icon-folder-open"></i>{{ item.DepartmentName }}</span>
          <ul>
            {% for item1 in deptlist %}
              {% if item1.Level == 1 %}
                <li>
                  <span data-keyid="{{ item1.KeyId }}"><i class="icon-minus-sign"></i>{{ item1.DepartmentName }}</span>
                </li>
              {% endif %}
            {% endfor %}  
          </ul>
        </li>
      {% endif %}
    {% endfor %}
  </ul>
  </div>

  <div class="col-md-9">
    <div class="col-md-12">
      <button type="button" name="add_department" class="btn btn-default">新增</button>
      <button type="button" name="edit_department" class="btn btn-default">修改</button>
      <button type="button" name="remove_department" class="btn btn-default">删除</button>
    </div>
    <div class="mt-4 col-md-12">
      <ul class="nav nav-tabs">
        <li role="presentation" class="active">
          <a name="tabpage" data-type="department_user_list">员工列表</a>
        </li>
        <li role="presentation">
          <a name="tabpage" data-type="department_set">部门设置</a>
        </li>
      </ul>
    </div>
  </div>
</div>

<script type="text/javascript">
$(function(){
    $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
    $('.tree li.parent_li > span').on('click', function (e) {
        var children = $(this).parent('li.parent_li').find(' > ul > li');
        if (children.is(":visible")) {
            children.hide('fast');
            $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
        } else {
            children.show('fast');
            $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
        }
        e.stopPropagation();
    });
});
</script>
{% endblock %}